/*
 * @Author: 谢子健 1075010289@qq.com
 * @Date: 2024-08-05 14:47:35
 * @LastEditors: 谢子健 1075010289@qq.com
 * @LastEditTime: 2024-08-05 15:24:40
 * @FilePath: \zhilianilink\src\componets\yingyong\AppHeader.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import logo from '@/assets/1.jpg';
import logo2 from '@/assets/2.jpg';
import '@/styles/AppHeader.scss';
import { FileTextOutlined, MessageOutlined } from '@ant-design/icons';
import { Avatar, Layout, Space } from 'antd';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import MessageDrawer from '../gongyongzujian/MessageDrawer';

const { Header } = Layout;

const AppHeader: React.FC = () => {
  const [drawerVisible, setDrawerVisible] = useState(false);
  const navigate = useNavigate();
  const showDrawer = () => {
    setDrawerVisible(true);
  };

  const closeDrawer = () => {
    setDrawerVisible(false);
  };
  
  const handleAvatarClick = () => {
    navigate('/profile'); // 跳转到用户信息页面
  };

  return (
    <Header className="header">
      <div className="left-section">
        <img src={logo} alt="Logo" className="logo" />
        <span className="title">智链 iLink</span>
      </div>
      <div className="right-section">
        <Space size="large">
          <FileTextOutlined style={{ fontSize: '1.5rem' }} />
          <MessageOutlined style={{ fontSize: '1.5rem' }} onClick={showDrawer} />
          <Avatar size="large" src={logo2} onClick={handleAvatarClick} style={{ cursor: 'pointer' }} />
        </Space>
      </div>
      <MessageDrawer visible={drawerVisible} onClose={closeDrawer} />
    </Header>
  );
};

export default AppHeader;
